<template>
  <transition name="imageAnimate" appear @after-leave="unmountInstance">
    <div className="test-wrap-root"  key="side-bar" v-show="visible">
      <div className="test-wrap-mask"></div>
      <div className="test-wrap-preview-wrap">
        <div className="test-wrap-preview-content">
          <div class="test-wrap-head">
            <span class="test-title">这是头部</span>
            <a-tooltip placement="left" color="cyan">
              <template #title>
                <span>关闭</span>
              </template>
              <CloseOutlined class="test-icon" @click="visible = false"/>
            </a-tooltip>
          </div>
          <a-spin tip="正在加载..." :spinning="spinning" wrapperClassName="spining-wrap" size="large">
            <iframe :id="domId" :src="src" frameborder="0" :style="{height: '100%', width: '100%'}" />
          </a-spin>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

import { message } from 'ant-design-vue';

import { ref, onMounted, onBeforeUnmount } from 'vue'

import { CloseOutlined } from '@ant-design/icons-vue';

export default {
  components: { CloseOutlined },
  props: {
    unmountInstance: {
      type: Function,
      default: () => {}
    },
    src: {
      type: String,
      default: ''
    }
  },
  setup({unmountInstance, src}) {
console.log('执行预览操作')

    const spinning = ref(true)
    const visible = ref(true)
    const url = ref('')
    const domId = 'pdf' + new Date().getTime()

    const afterLeave = () => {
      console.log('afterLeave')
      console.log(unmountInstance)
    }

    const loadIframe = () => {

      const dom = document.getElementById(domId)

      dom.onload = () => { // 采用 iframe 预览 PDF 文件。 因为  PDFObject 没有加载成功回调函数，无法处理  loading 动画
        spinning.value = false
      }

      dom.onerror = () => {
        // url.value = '/static/images/img-404.png'
        spinning.value = false
        message.error('文件预览出错！')
      }
    }

    onMounted(() => {
      loadIframe()
    })

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })

    return {
      visible,
      afterLeave,
      spinning,
      url,
      domId
    }
  }
}
</script>

<style lang="less" scoped>

.imageAnimate-enter-active,
.imageAnimate-leave-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: all 0.15s ease-in;
}

.imageAnimate-enter-from,
.imageAnimate-leave-to {
  opacity: 0;
  transform: scale(0.6, 0.6);
}

</style>

<style scoped lang="less">

.test-wrap-root{
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  .spining-wrap{
    // height: calc(100% - 26px);
    flex: 1;
    /deep/.ant-spin-container{
      height: 100%;
    }
    // position: absolute;
    // left: 0;
    // right: 0;
    // top: 0;
    // bottom: 0;
    // display: flex;
    // align-items: center;
    // justify-content: center;
  }
  .test-wrap-mask{
    background-color: rgba(0, 0, 0, .45);
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
  }
  .test-wrap-preview-wrap{
    bottom: 0;
    left: 0;
    outline: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1080;
    overflow: hidden;
    .test-wrap-preview-content{
      display: flex;
      flex-direction: column;
      background: white;
      position: absolute;
      top: 20px;
      right: 20px;
      bottom: 20px;
      left: 20px;
      box-shadow: 0 1px 3px rgba(0 0 0 / 38%);
      border-radius: 4px;
      .test-wrap-head{
        height: 26px;
        display: flex;
        padding: 0px 10px;
        line-height: 26px;
        align-items: center;
        border-bottom: 1px solid #e6ebf5;
        .test-title{
          flex: 1;
          font-weight: bold;
          color: #6e6e6e;
          cursor: default;
        }
        .test-icon{
          width: 26px;
          height: 26px;
          line-height: 28px;
          cursor: pointer;
        }
      }
      iframe{
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }


}
</style>